<style lang="less">
    @import "./main.less";

	.index-container {
		//max-width: 1200px;
		padding: 0 5px;
		overflow-x: hidden;
	}

    .top-title {
        height:39px;
        line-height:39px;
        background-color:#F7F9FA;
        //border-bottom:1px solid #eee;
        font-size: 12px;
		color: #666666;
        .vertical-break-sign {
            &::after{
                content: "|";
                margin: 0 15px;
                color: rgb(210, 222, 235);
            }
        }
    }
    .top-menu {
        //height: 80px;
        line-height: 80px;
        font-size: 14px;
        color: #333333;
        border-bottom: 1px solid #eee;
        box-shadow: #eee 0 0 15px 0;
        &-item {
            margin: 0 0px;
        }
    }
    .breadcrumb-navigation {
        height: 60px;
        line-height: 60px;
        font-size: 12px;
        color: #999;
    }
    .bottom-aboutus {
        padding: 60px 0;
        background-color: rgb(51, 51, 51);
        font-size: 14px;
        line-height: 24px;
        color: #999;
        &-title {
            color: #eee;
            margin: 14px 0;
        }
    }
    .bottom-footer {
        padding: 15px 0;
        background-color: rgb(34, 34, 34);
        font-size: 12px;
        line-height: 24px;
        color: #666;
	}
	
	.footer-icon {
		height: 40px;
		width: 40px;
		padding: 10px;
		border-radius: 100px;
		background-color: #444;
		//filter: drop-shadow(orange 0 0);
		&:hover {
			background-color: #888;
		}
	}

	.index-bottom-link {
		color: #666;
		cursor: pointer;
		&:hover {
			color: #999;
        	text-decoration: underline;
		}
	}
</style>
<template>
<Row id="index-container" class="index-container">
	<Col style="max-width:1200px;" center>
		<div v-show="!isPhone">
			<div class="full-background top-title">
				<span>{{footer.companyInfo.name}}官网</span>
				<span right>
					<Button type="text" :to="{name:'shopping-cart'}" nopd>
						<Icon type="md-cart" sz1 mgr1/>
						<span mgr1>购物车</span>
						<Badge id="shopping-cart-top" type="primary" :count="shoppingCartItems.length"></Badge>
					</Button>
					<span v-if="isLogined">
						<span class="vertical-break-sign"></span>
						<background-image v-if="member.head" :value="member.head" bd-circle style="height:24px;width:24px;margin-bottom:-8px;" mgr2 />
						<Button type="text" :to="{name:'member-index'}" nopd>个人中心</Button>
						<span class="vertical-break-sign"></span>
						<Button type="text" @click="loginout" nopd>注销</Button>
					</span>
					<span v-else>
						<span class="vertical-break-sign"></span>
						<Button type="text" :to="{name:'login'}" nopd>登陆</Button>
						<span class="vertical-break-sign"></span>
						<Button type="text" :to="{name:'register'}" nopd>注册</Button>
					</span>
				</span>
				
			</div>
			<Row>
				<Col class="top-menu full-background" :xs="{ span: 0, offset: 0 }" :sm="{ span: 24, offset: 0 }">
					<router-link class="top-menu-item" mgr3 :to="{name:'home'}">
						<img :src="footer.websiteInfo.logo" style="height:40px;margin-top:20px;float:left;" alt="">
					</router-link>
					<Button type="text" size="large" class="top-menu-item" :to="{name:'home'}">首页</Button>
					<Button type="text" size="large" class="top-menu-item" :to="{name:'about',params:{tag:'companyprofile'}}">关于我们</Button>
					<Button type="text" size="large" class="top-menu-item" :to="{name:'article-list',params:{systemtype:1}}">公司资讯</Button>
					<Button type="text" size="large" class="top-menu-item" :to="{name:'article-list',params:{systemtype:2}}">微课堂</Button>
					<Button type="text" size="large" class="top-menu-item" @click="handleGoTo('https://dd.kq39.cn/zhenwei/index/282')">真伪查询</Button>
					<Button type="text" size="large" class="top-menu-item" :to="{name:'mall'}">商城</Button>
					<Button type="text" size="large" class="top-menu-item" :to="{name:'contact-us'}">联系我们</Button>
					<Input v-model="search" size="large" style="width:18%;" placeholder="搜索..." right lh5 nobd>
						<Icon type="ios-search" slot="suffix" linkable-noline @click="handleGotoSearch" />
					</Input>
				</Col>
				<Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 0, offset: 0 }">
					<Row>
						<Col span="24" bdb-gray4>
							<Button type="text" size="large" :to="{name:'home'}">首页</Button>
							<Button type="text" size="large" :to="{name:'about',params:'companyprofile'}">关于我们</Button>
							<Button type="text" size="large" :to="{name:'article-list',params:{systemtype:1}}">公司资讯</Button>
							<Button type="text" size="large" :to="{name:'article-list',params:{systemtype:2}}">微课堂</Button>
							<Button type="text" size="large" @click="handleGoTo('https://dd.kq39.cn/zhenwei/index/282')">真伪查询</Button>
							<Button type="text" size="large" :to="{name:'mall'}">商城</Button>
							<Button type="text" size="large" :to="{name:'contact-us'}">联系我们</Button>
						</Col>
						<Col span="24" mgb2 mgt2 bdb-gray4>
							<Col span="8" text-center>
								<img src="../images/logo.png" style="height:36px" alt="">
							</Col>
							<Col span="16">
								<Input v-model="search" size="large" style="width:18%;" placeholder="搜索..." long>
									<Icon type="ios-search" slot="suffix" linkable @click="handleGotoSearch" />
								</Input>
							</Col>
						</Col>
					</Row>
				</Col>
			</Row>
		</div>
		<div style="padding-bottom:80px;">
			<!-- <keep-alive :include="cachePage">
				<router-view></router-view>
			</keep-alive>  -->
			<slot name="content"></slot>
		</div>
		<div v-show="!isPhone">
			<div class="full-background bottom-aboutus">
				<Row>
					<Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 12, offset: 0 }">
						<p class="bottom-aboutus-title">关于我们</p>
						<div style="padding-right: 50px;">
							<p>{{ellipsis(footer.companyProfile.description)}}</p>
							<p mgt2>
								<Poptip v-if="footer.companyInfo.qq" trigger="hover" :content="footer.companyInfo.qq" mgr2>
									<img class="footer-icon" src="../images/qq-logo.png">
								</Poptip>
								<Poptip v-if="footer.companyInfo.weixin" trigger="hover" padding="10px" width="120" mgr2>
									<div slot="content" text-center>
										<img :src="footer.companyInfo.weixin" width=100 height=100 alt="">
									</div>
									<img class="footer-icon" src="../images/weixin-logo.png">
								</Poptip>
								<a v-if="footer.companyInfo.weibo" :href="footer.companyInfo.weibo" target="_blank">
									<img class="footer-icon" src="../images/weibo-logo.png">
								</a>
							</p>
						</div>
					</Col>
					<Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 12, offset: 0 }">
						<p class="bottom-aboutus-title">联系我们</p>
						<table class="minitable-easy" pdx3>
							<tr>
								<td w2><Icon type="md-pin" /></td>
								<td>{{footer.companyInfo.address}}</td>
							</tr>
							<tr>
								<td><Icon type="ios-call" /></td>
								<td>{{footer.companyInfo.phoneNumber}}</td>
							</tr>
							<tr>
								<td valign="top"><Icon type="md-calendar" /></td>
								<td><p v-for="(item, index) in workingDays" :key="index">{{item}}</p></td>
							</tr>
						</table>
					</Col>
				</Row>
			</div>
			<div class="full-background bottom-footer">
				<p ellipsis>
					<span>
						<router-link class="index-bottom-link" :to="{name:'coupon-center'}">领券中心</router-link> | 
						<router-link class="index-bottom-link" :to="{name:'article-list',params:{systemtype:3}}">企业通知</router-link> | 
						<router-link class="index-bottom-link" :to="{name:'friendly-link'}">友情链接</router-link> 
						| <router-link class="index-bottom-link" :to="{name:'feedback'}">咨询留言</router-link>
					</span>
					<span style="margin-left:20px;">
						<span>友情链接：</span>
						<span v-for="(item, index) in footer.friendlyLinks" :key="index">
							<a :href="item.link" class="index-bottom-link" target="_blank">{{item.description}}</a> <span v-if="index<footer.friendlyLinks.length-1"> / </span>
						</span>
					</span>
				</p>
				<p>
					<span>{{footer.companyInfo.name}}  版权所有 {{footer.websiteInfo.copyrightTimeLimit}}  {{footer.websiteInfo.copyright}}</span>
				</p>
			</div>
		</div>
		<div v-if="isPhone" class="full-background bottom-footer">
			<p text-center>
				<span>{{footer.companyInfo.name}}  版权所有 {{footer.websiteInfo.copyrightTimeLimit}}  {{footer.websiteInfo.copyright}}</span>
			</p>
		</div>
	</Col>
</Row>
</template>
<script lang="ts">
;import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../lib/abpbase';
import Util from '../lib/util';
import BackgroundImage from '@common/components/background-image'

@Component({
	components: { BackgroundImage }
})
export default class IndexMain extends AbpBase{
	search:string = "";
	get member() {
		return this.$store.state.self.member;
	}
	get footer() {
		return this.$store.state.websiteInfo.homeFooter;
	}
	get cachePage(): Array<string> {
		return [];
	}
	get shoppingCartItems() {
		return this.$store.state.shoppingcart.items;
	}
	get workingDays() {
		var temp = this.footer.companyInfo.workingDay || "";
		return temp.split("\n");
	}
	loginout(){
		this.$store.commit('app/logout', this);
		Util.abp.auth.clearToken();
		location.reload();
	}
	handleGoTo(url) {
		window.open(url); 
	}
	handleGotoSearch() {
		this.$router.push({
			name: 'search-result',
			query: {
				search: this.search
			}
		});
	}
}
</script>
